<template>
	<view class="edit-container">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<tn-button style="color: black; width: 35px; height: 35px; font-size: 15px;" :border="false"
				@click="handleReturn">
				<text class="tn-icon-left" />
			</tn-button>
			<text class="title">编辑商品</text>
		</view>

		<!-- 编辑表单 -->
		<view class="edit-form">
			<!-- 商品图片 -->
			<view class="form-item">
				<text class="label">商品图片</text>
				<view class="image-upload" @tap="chooseImage">
					<image v-if="formData.picUrl" :src="formData.picUrl" mode="aspectFill" class="preview-image" />
					<text v-else class="upload-text">点击上传图片</text>
				</view>
			</view>

			<!-- 商品名称 -->
			<view class="form-item">
				<text class="label">商品名称</text>
				<input v-model="formData.name" placeholder="请输入商品名称" class="textarea" />
			</view>

			<!-- 商品简介 -->
			<view class="form-item">
				<text class="label">商品简介</text>
				<textarea v-model="formData.brief" placeholder="请输入商品简介" class="textarea" />
			</view>

			<!-- 商品价格 -->
			<view class="form-item">
				<text class="label">商品价格</text>
				<input v-model="formData.counterPrice" placeholder="请输入商品价格" class="textarea" />
			</view>

			<!-- 商品数量 -->
			<view class="form-item">
				<text class="label">商品数量</text>
				<input v-model="formData.number" placeholder="请输入商品数量" class="textarea" />
			</view>

			<!-- 保存按钮 -->
			<button class="save-btn" @tap="saveGoods">保存修改</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsId: null,
				formData: {
					name: '',
					brief: '',
					counterPrice: '',
					picUrl: '',
					number: ''
				}
			}
		},

		onLoad(options) {
			if (options.id) {
				this.goodsId = options.id;
				this.loadGoodsDetail();
			}
		},

		methods: {
			handleReturn() {
				uni.navigateBack({
					delta: 1
				});
			},

			async loadGoodsDetail() {
				uni.showLoading({
					title: '加载中...'
				});
				const userInfo = uni.getStorageSync('userInfo');
				try {
					const res = await uni.request({
						url: this.baseUrl + `/wx/publish/detail/${userInfo.id}/${this.goodsId}`,
						method: 'GET',
					});

					if (res.data.errno === 0) {
						console.log(res.data.data);
						const goods = res.data.data;
						this.formData = {
							name: goods.name,
							brief: goods.brief,
							counterPrice: String(goods.counterPrice || 0),
							picUrl: goods.picUrl,
							number: String(goods.number || 1)
						};
					} else {
						uni.showToast({
							title: res.data.errmsg || '获取商品信息失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.showToast({
						title: '获取商品信息失败',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},

			chooseImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						uni.uploadFile({
							url: this.baseUrl + '/wx/storage/upload',
							filePath: tempFilePath,
							name: 'file',
							success: (uploadRes) => {
								const data = JSON.parse(uploadRes.data);
								if (data.errno === 0) {
									this.formData.picUrl = data.data.url;
								}
							},
							fail: () => {
								uni.showToast({
									title: '上传图片失败',
									icon: 'none'
								});
							}
						});
					}
				});
			},

			async saveGoods() {
				if (!this.formData.name || !this.formData.brief || !this.formData.counterPrice) {
					uni.showToast({
						title: '请填写完整商品信息',
						icon: 'none'
					});
					return;
				}

				if (isNaN(this.formData.counterPrice) || Number(this.formData.counterPrice) <= 0) {
					uni.showToast({
						title: '请输入正确的价格',
						icon: 'none'
					});
					return;
				}

				try {
					const userInfo = uni.getStorageSync('userInfo');
					const res = await uni.request({
						url: this.baseUrl + `/wx/publish/update/${userInfo.id}/${this.formData.number}`,
						method: 'POST',
						data: {
							id: this.goodsId,
							name: this.formData.name,
							brief: this.formData.brief,
							counterPrice: Number(this.formData.counterPrice)
						}
					});

					if (res.data.errno === 0) {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						});
						// 设置上一页需要刷新的标记
						const pages = getCurrentPages();
						const prevPage = pages[pages.length - 2];
						if (prevPage) {
							prevPage.$vm.loadMyPublishedGoods();
						}
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: res.data.errmsg || '保存失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('保存商品失败:', error);
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style>
	.edit-container {
		padding: 30rpx;
		background-color: #f8f8f8;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		margin-bottom: 30rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.title {
		margin-left: 20rpx;
		font-size: 34rpx;
		font-weight: 600;
		color: #333333;
	}

	.form-item {
		background-color: #ffffff;
		padding: 20rpx;
		margin-bottom: 15rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
	}

	.label {
		display: block;
		margin-bottom: 10rpx;
		font-size: 28rpx;
		color: #666666;
		font-weight: 500;
	}

	.input,
	.textarea {
		width: 100%;
		padding: 16rpx;
		background-color: #f5f7fa;
		border: none;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.textarea {
		height: 120rpx;
	}

	.image-upload {
		width: 180rpx;
		height: 180rpx;
		border: 2rpx dashed #dddddd;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		background-color: #f5f7fa;
		transition: all 0.3s ease;
	}

	.image-upload:active {
		background-color: #e8e8e8;
	}

	.preview-image {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
		object-fit: cover;
	}

	.upload-text {
		font-size: 24rpx;
		color: #999999;
	}

	.save-btn {
		margin-top: 30rpx;
		background: linear-gradient(135deg, #4CAF50, #45a049);
		color: white;
		padding: 24rpx;
		border-radius: 12rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.2);
		transition: all 0.3s ease;
	}

	.save-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.2);
	}
</style>